
<template>
  <div class="login-wrapper" :style="`background:url(img/${img_list[index]}.jpg)`">
    <div class="login-box">
      <h3>酒店后台登录</h3>
      <el-form
        :model=" loginForm"
        :rules="rules"
        ref="registerFrom"
        label-width="81px"
        class="demo-ruleForm"
      >
        <el-form-item :model="loginForm" class="name" label="账号" prop="ausername">
          <el-input
            v-model="loginForm.ausername"
            prefix-icon="iconfont icon-tubiao211"
            placeholder="请输入账号"
          ></el-input>
        </el-form-item>
        <el-form-item class="pass" label="密码" prop="apassword">
          <el-input
            type="password"
            v-model=" loginForm.apassword"
            prefix-icon="iconfont icon-mima"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item class="code" label="验证码" prop="token">
          <el-input v-model="loginForm.token" placeholder="请输入验证码" class="verification"></el-input>
          <img :src="img_Code" class="aimg" @click="replace" />
        </el-form-item>
        <div class="item-button">
          <el-button type="primary" @click="mainClick">登录</el-button>
          <el-button type="info" @click="resetClick">重置</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    let validusername = (rule, value, callback) => {
      let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{10,15}$/;
      if (!reg.test(value)) {
        callback(new Error("账户必须是由10-15位字母+数字组合"));
      } else {
        callback();
      }
    };
    let validPassword = (rule, value, callback) => {
      let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,10}$/;
      if (!reg.test(value)) {
        callback(new Error("密码必须是由6-10位字母+数字组合"));
      } else {
        callback();
      }
    };
    return {
      img_Code: "http://58rdia.natappfree.cc/admin/getVerifyCode",
      loginForm: {
        ausername: "",
        apassword: "",
        token: "",
      },
      img_list: ["1", "2", "3", "4"],
      index: 0,
      timer: null,
      // 这是表单的验证规则
      rules: {
        ausername: [
          { required: true, message: "账号不得为空", trigger: "blur" },
          {
            min: 10,
            max: 20,
            message: "长度应在10-15位字母数字组合",
            triggerf: "blur",
          },
          { validator: validusername, trigger: "blur" },
        ],
        apassword: [
          { required: true, message: "密码不得为空", trigger: "blur" },
          {
            min: 6,
            max: 18,
            message: "长度应在6-10位之间字母数字组合",
            triggerf: "blur",
          },
          { validator: validPassword, trigger: "blur" },
        ],
      },
    };
  },

  created() {
    this.timer = setInterval(() => {
      if (this.index + 1 >= this.img_list.length) {
        this.index = 0;
      } else {
        this.index++;
      }
    }, 5000);
  },

  methods: {
    replace() {
      this.img_Code = "http://58rdia.natappfree.cc/admin/getVerifyCode";
         var timestamp ='?time='+new Date().getTime();
          this.img_Code += timestamp
          console.log(this.img_Code);

    },
    resetClick() {
      this.$refs.registerFrom.resetFields();
    },
    mainClick() {
		this.$router.push({
			path:'/main'
		})
		
      // this.$refs.registerFrom.validate((valid) => {
      //   if (!valid) return;
      //   this.$http({
      //     url: "/admin/alogin",
      //     method: "get",
      //     params: {
      //       ausername: this.loginForm.ausername,
      //       apassword: this.loginForm.apassword,
      //       token: this.loginForm.token
      //     },
      //   }).then((res) => {
      //     console.log(res);
      //     if (res.code != 0) {
      //       return this.$message.error("登陆失败");
      //     }
      //     this.$message.success("登陆成功");
      //     this.$router.push("/main");
      //   });
      // });
    },
  },
};
</script>

<style scoped>
.login-wrapper {
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  transition: all 0.6s;
  /* background: url(./1.jpg) no-repeat 100% 100%; */
}
.login-box {
  border: 1px solid #ccc;
  width: 400px;
  height: 400px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 5px #eee;
  background-color: skyblue;
}
h3 {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 40px;
}
.name {
  width: 400px;
}
.pass {
  width: 400px;
}
.acode {
  width: 200px;
}
el-input {
  width: 92px;
}
.aimg {
  display: inline-block;
  width: 90px;
  height: 30px;
  background: orange;
  height: 40px;
  vertical-align: middle;
  margin-left: 20px;
}
.item-button {
  display: flex;
}
.item-button button {
  width: 340px;
  margin: 40px 0 0 40px;
}
.el-form-item__label {
  margin: 0;
}
.code {
  width: 400px;
  margin-bottom: 0;
  vertical-align: middle;
}
.verification {
  width: 200px;
}
</style>